import { Button, Modal } from 'antd';
import { useState } from 'react';
import styles from '../index.less';
import NewAddress from './NewAddress';

interface Props {
  visible: boolean;
  onCancel: () => void;
  delectOne: (id: any) => void;
  getList: () => void;
  address: any;
  style: any;
  color: string;
}

const ManageAddress: React.FC<Props> = ({
  visible,
  onCancel,
  address,
  style,
  color,
  delectOne,
  getList,
}) => {
  const [newAddress, setNewAddress] = useState<boolean>(false);

  const confirmAction = (id: any) => {
    Modal.confirm({
      title: '删除',
      centered: true,
      content: '是否删除该地址？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => delectOne(id),
    });
  };

  return (
    <Modal
      visible={visible}
      onCancel={onCancel}
      centered
      width={650}
      className={styles.manegeModal}
      footer={[
        <div className={styles.newbtn} key={'1'}>
          <Button
            style={style}
            onClick={() => {
              setNewAddress(true);
            }}
          >
            新增
          </Button>
        </div>,
      ]}
      title="管理收货地址"
    >
      {address.map((item: any) => {
        return (
          <div key={item.userid} className={styles.addressdiv}>
            {`${item.province} ${item.city} ${item.area} ${item.detail}
                    （${item.receiptname} 收）`}
            <span style={{ color: color }}>&nbsp;{item.tel}</span>
            {/* {item.isdefault === 'true' && <span>默认地址</span>} */}
            <div className={styles.btns}>
              <div
                className={styles.deletebtn}
                style={{ border: `1px solid ${color}` }}
                onClick={() => {
                  confirmAction(item.id);
                }}
              >
                删除
              </div>
            </div>
          </div>
        );
      })}
      <NewAddress
        visible={newAddress}
        onCancel={() => setNewAddress(false)}
        style={style}
        addressModal={onCancel}
        getList={getList}
      />
    </Modal>
  );
};

export default ManageAddress;
